<template>
	<div>

		<div @click="addParamter" class="displayFlex point " style="margin-bottom: 10px;justify-content: flex-end;">
			<div class="addButton">+</div>
			<div>新增参数</div>
		</div>

		<el-form ref="form" :model="form" label-width="100px">
			<div class="displayFlexBet" v-for="(item,index) in form.parameterList" :key="index">
				<el-form-item label="名称" prop="parameterName" style="flex: 2;">
					<el-input v-model="item.parameterName"></el-input>
				</el-form-item>
				<el-form-item label="设计值类型" prop="designValueType" style="flex: 2;">
					<el-select v-model="item.designValueType">
						<el-option :label="item1.label" :value="item1.value"
							v-for="(item1,index1) in [{label: '固定值', value: 'EXACT_VALUE' }, { label: '范围值' , value: 'SCOPE_VALUE' }]">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item v-if="item.designValueType == 'EXACT_VALUE'" label="设计值" prop="designValue"
					style="flex: 2;">
					<el-input v-model="item.designValue"></el-input>
				</el-form-item>
				
				<el-form-item v-if="item.designValueType == 'SCOPE_VALUE'" label="设计值" prop="minDesignValue"
					style="flex: 2;">
					<el-input v-model="item.minDesignValue" placeholder="最小值"></el-input>
				</el-form-item>
				<el-form-item v-if="item.designValueType == 'SCOPE_VALUE'" label="设计值" prop="maxDesignValue"
					style="flex: 2;">
					<el-input v-model="item.maxDesignValue" placeholder="最大值"></el-input>
				</el-form-item>
				
				
				<el-form-item label="单位" prop="unitCode" style="flex: 2;">
					<el-input v-model="item.unitCode"></el-input>
				</el-form-item>

				<div v-if="index > 0" @click="deleteParamter(index)"
					style="flex: 1;margin-left: 20px;margin-bottom: 20px;text-align: center;color: crimson">删除</div>
				<div v-else style="flex: 1;margin-left: 20px;"></div>
			</div>

			<el-form-item style="text-align: center;margin-left: -90px!important;">
				<!-- <el-button v-if="editData && editData.id" type="danger" @click="deleteThis">删除</el-button> -->
				<el-button type="primary" @click="saveOrUpdate">保存</el-button>
				<el-button @click="cancle">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	let that
	export default {
		name: 'addParamter',
		components: {},
		props: ['outletId', 'editData'],
		data() {
			return {
				params: {
					ticketId: '',
				},
				form: {
					parameterList: [{
						parameterName: '',
						designValueType: 'EXACT_VALUE',
						minDesignValue:'',
						maxDesignValue:'',
						designValue: '',
						unitCode: ''
					}]
				},

				wasteList: [],
				unitList: []
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token

			that.form.outletId = that.editData.id
			if (that.editData && that.editData.parameterList && that.editData.parameterList.length > 0) that.form
				.parameterList = that.editData.parameterList
		},
		methods: {

			//增加参数
			addParamter() {
				that.form.parameterList.push({
					parameterName: '',
					designValueType: 'EXACT_VALUE',
					minDesignValue:'',
					maxDesignValue:'',
					designValue: '',
					unitCode: ''
				})
			},

			//删除参数
			deleteParamter(index) {
				that.form.parameterList.splice(index, 1)
			},

			cancle() {
				that.$emit("cancle", true)
			},

			//删除危废
			deleteThis() {
				this.$confirm('此操作将删除此数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/waterOutlet/deleteWaterOutletMaterial?ticketId=' + that.params.ticketId,
						data: {
							waterOutletMaterialId: that.editData.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.status && result.data) {
								that.data = that.$options.data()
								that.$forceUpdate()
								that.$emit("success", true)
							}
						}
					})
				})
			},

			saveOrUpdate: function() {
				for (let item of that.form.parameterList) {
					if (item.parameterName == '') {
						return this.$message.error('请填写参数名');
					}
				}
				var _this = this;
				this.$refs['form'].validate(function(valid) {
					if (valid) {
						_this.form.facilitatorId = that.params.facilitatorId
						that.ajax({
							url: '/gasOutlet/saveGasOutletParameterList?ticketId=' + that.params
								.ticketId,
							data: JSON.stringify(_this.form),
							contentType: 'application/json',
							success: function(result) {
								if (result.status == 1 && result.data) {
									that.data = that.$options.data()
									that.$forceUpdate()
									if (_this.form.id) {
										that.$emit("success", true)
									} else {
										that.$emit("success", true)
									}
								} else {}
							}
						});
					}
				});
			},

		}
	}
</script>

<style>

</style>
